<template>
    <div class="content">
      <div class="block1">
        <dv-border-box-10 class="one zuo" :color="['#708CD2', '#708CD2']">
          <p class="shang">生均借阅量</p>
          <p>
            <span>{{ bookNum }}</span
            >本
          </p>
        </dv-border-box-10>
      </div>
      <div class="block2">
        <dv-border-box-10 class="one zhong" :color="['#708CD2', '#708CD2']">
          <p class="shang">本月借阅人数</p>
          <p>
            <span>{{ borrowNum }}</span
            >人次
          </p>
        </dv-border-box-10>
      </div>
      <div class="block3">
        <dv-border-box-10 class="one you" :color="['#708CD2', '#708CD2']">
          <p class="shang">本月借阅率</p>
          <p>
            <span>{{ rate }}</span
            >%
          </p>
        </dv-border-box-10>
      </div>
    </div>
</template>

<script>
export default {
  name: "TeachingTop",
  data() {
    return {
      rate: 21.322,
      borrowNum: 15120,
      bookNum: 2.251,
      stuNum: 15120,
    };
  },
  mounted() {
    this.interval = window.setInterval(() => {
      this.generate();
    }, Math.random() * 1000 + 1500);
  },
  methods: {
    generate() {
      this.borrowNum += Math.floor(Math.random() * (80 - 1 + 1)) + 30;
      this.bookNum += Math.floor(Math.random() * 100) / 8000; // 生成一个介于 0 到 0.99 之间的随机数，再除以 100
      this.bookNum = parseFloat(this.bookNum.toFixed(3));
      this.rate += Math.floor(Math.random() * 100) / 10000;
      this.rate = parseFloat(this.rate.toFixed(3)); // 确保结果保留两位小数
    },
  },
  beforeDestroy() {
    window.clearInterval(this.interval); // 一定要清除定时器
  },
};
</script>

<style scoped>
.content {
  color: #fff;
  display: flex;
  flex-direction: row-reverse;
  height: 100%; /* 设置容器高度 */
  width: 100%;
}
.content span {
  color: #79e2f9;
  line-height: 10px;
  font-weight: bold;
  font-size: 32px;
}
.block1,
.block2,
.block3 {
  flex: 1;
  border-radius: 10px;
  margin: 5px;
}
.shang {
  line-height: 70px;
}

.block2 {
  /* background-color: rgb(212, 241, 175); */
  margin: 5px 0;
}
</style>
